<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>聊天室</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/layout.css">
</head>

<body>
    <div class="container">
        <h1>express+socket.io聊天室<span id="chat-count"></span></h1>
    </div>
    <div class="row" id="login">
        <div class="col-md-12">
            <div class="form-group">
                <label for="username">姓名</label>
                <input type="email" class="form-control" id="username" placeholder="用户昵称">
                <button type="submit" class="btn btn-default" id="show-btn">提交</button>
            </div>
        </div>
    </div>

    <div class="row" id="content">
        <div class="col-md-12" id="chatcon">
        </div>
        <textarea id="msgcon" class="form-control" rows="3"></textarea>
        <button type="submit" class="btn btn-default" id="send-btn">提交</button>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        var socket;
        var uname; //客户端本人昵称

        // 输入昵称点击提交，显示聊天框
        $('#show-btn').on('click', function () {
            // 判断输入框是否有昵称
            uname = $('#username').val().trim()
            if (uname) {
                $('#login').hide();
                $('#content').show();

                // 点击提交就建立连接
                socket = io('http://localhost:3000');
                // 监听服务器端事件推送
                socket.on('connect', function () {
                    // 连接成功后给服务端发送'连接成功'的消息
                    socket.emit('login', uname)
                });

                socket.on('count', function (data) {
                    $('#chat-count').html(`(${data})人`)
                })

                // 创建模板，将聊天内容显示到页面上
                function createTpl(data, flag) {
                    var str = `<div class="con-item">
                <p><span class="label label-info">${flag ? '我' : data.user}</span></p>
                <p>
                    <span class="alert alert-${flag ? 'success' : 'warning'}">${data.msg}</span>
                </p>
                </div>`
                    return str
                }

                // 接收服务端发送给所有客户端的消息，并显示
                socket.on('msg', function (data) {
                    console.log(data)
                    var flag = data.user == uname
                    var tpl = createTpl(data, flag)
                    $('#chatcon').append(tpl)
                });

                socket.on('disconnect', function () {
                    console.log('断开连接')
                });
            }
            // 如果输入框没有昵称
            else return
        })

        // 聊天框输入内容，点击提交，客户端将聊天框内容发送到服务端
        $('#send-btn').on('click', function () {
            socket.emit('send', $('#msgcon').val())
        })
    </script>

</body>

</html>